<template>
  <section class="card-box card-two">
    <div class="card-header">
      <CardTitle
        :title="'报道摘编 '+ dateFormatMX('YYYY-mm-dd',pickerValue)"
        @showCalendar="setOpenPicker"
        @getFilterInfo="getFilterInfo"
      ></CardTitle>
    </div>

    <div class="card-content">
      
      <NoData v-if="list.length == 0"></NoData>

      <swiper class="mySwiper" :options="swiperOption" ref="mySwiperA" v-if=" list.length > 0"> <!-- list.length > 0 -->
          <swiper-slide v-for="(it,i) in list" :key="i">
             <div class="txt-wrapper">
                <h3>{{ it.title }} <i class="label-txt">正</i></h3>
                <section class="txt-subtxt">
                  <div class="star-date-box">
                    <span class="datetime-txt">{{dateFormatMX("mm-dd",it.createTime)}} 刊发</span>
                    <span class="star-box">
                      <Star :activeNum="it.star"></Star>
                    </span>
                  </div>
                  <!-- <span class="view-more-btn">点击查看详情</span> -->
                </section>
                <section class="img-cover" v-if="it.image">
                  <img v-if="it.image" :src="`http://121.201.107.99:20023/epaper/`+it.image" />
                </section>
                <section class="txt-content">
                  <p>
                    {{ it.content }}
                  </p>
                </section>
                <section class="txt-about-link">
                  <h4>相关链接</h4>
                  <ul class="link-list">
                    <li v-for="(t,index) in JSON.parse(it.urls)" :key="index" @click="goToNewPage(t.url)">{{ t.name }}</li>
                  </ul>
                </section>
              </div>
          </swiper-slide>
      </swiper>

    </div>

    <div class="card-footer">
      <CardFooter></CardFooter>
    </div>

    <mt-datetime-picker
      ref="picker"
      type="date"
      v-model="pickerValue"
      @confirm="handleConfirm"
      class="cdatePicker"
      year-format="{value} 年" month-format="{value} 月" date-format="{value} 日"
    ></mt-datetime-picker>

  </section>
</template>

<script>
import CardTitle from "&/components/card-title/index.vue";
import CardFooter from "&/components/card-foot/index.vue";
import Star from "&/components/star-box/index.vue";
import NoData from '@/components/no-data/index.vue'

import { swiper, swiperSlide } from 'vue-awesome-swiper' 

import { mapState } from "vuex";

export default {
  name: "wechat-card-two",
  data() {
    return {
      pickerValue: new Date(),
      currentPage: 1, // 当前页
      // currentDate: new Date().getTime(), // 当前时间
      list: [], // 新闻列表
      btnOnoff: true,
      params: {
        page: 1,
        size: 500,
        totalNum: 6,
        totalPage: 1,
      }, // 参数
      swiperOption: {
        // 所有配置均为可选（同Swiper配置）  
        // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: true,     //我现在还没有搞清楚这个东西，反正加上就是了
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: true, // 用户操作后停止自动播放
        },
        observer:true,//修改swiper自己或子元素时，自动初始化swiper 
　　    observeParents:true,//修改swiper的父元素时，自动初始化swiper 
        loop:true,
        grabCursor : true,
        setWrapperSize :true,
        autoHeight: true,
        pagination : '.swiper-pagination',
        paginationClickable :true,
        scrollbar:'.swiper-scrollbar',
        mousewheelControl : true,
        onTransitionStart(swiper){
          console.log(swiper)
        },
        on:{
          // 开始运动
          slideChangeTransitionStart:() => {
            this.$nextTick(() => {
              // this.currentPage = this.swiper.activeIndex;
            })
            // console.log(this.swiper.activeIndex)
          },
          // 结束运动
          slideChangeTransitionEnd: () => {
            this.btnOnoff = true;
            this.$nextTick(() => {
              if(this.swiper.activeIndex == this.list.length+1){
                this.currentPage = 1;
                return;
              }else if(this.swiper.activeIndex == 0){
                this.currentPage = this.list.length;
                return;
              }
              // console.log(this.swiper.activeIndex);
              this.currentPage = this.swiper.activeIndex;
            })
          },
        }
      },
      pramsAttr:{
        startTime: '',
        endTime: '',
        emotion: '',
        labelIdStr: ''
      }
    };
  },
  created() {
    // this.handleConfirm(new Date().getTime()); // 默认当天筛选
    this.requestListApi();
  },
  mounted(){
    this.initCalcContentHeight();
  },
  methods: {
    initCalcContentHeight(){
      let header = document.querySelector('.card-header');
      let content = document.querySelector('.card-content');
      let footer = document.querySelector('.card-footer');
      let body = document.querySelector('body');

      let spaceHeight = body.clientHeight - header.offsetHeight - footer.offsetHeight;
      content.style.height = (spaceHeight-30) + 'px';
    },
    // 点击日历选择
    handleConfirm(v) {
      console.log(v);
      // 重新请求
      this.pramsAttr.startTime = new Date(new Date(new Date(v).toLocaleDateString()).getTime()).getTime(); // 当天0点
      this.pramsAttr.endTime = new Date(new Date(new Date(v).toLocaleDateString()).getTime() +24 * 60 * 60 * 1000 -1).getTime(); // 当天23:59
      
      this.requestListApi();
    },
    // 获取筛选项信息
    getFilterInfo(data){
      this.pramsAttr.emotion = data.emotion;
      this.pramsAttr.labelIdStr = data.labelIdStr;

      this.requestListApi(); // 再次加载
    },
    // 获取新闻列表
    requestListApi() {
      this.axios
        .get(`${this.serverApi}/reportPaper/list`, {
          params: this.pramsAttr,
        })
        .then((res) => {
          if (res.data.data) {
            this.list = res.data.data.data;
            // 其他参数
            this.currentPage = 1; // 当前页
            this.params.page = res.data.data.page;
            this.params.size = res.data.data.size;
            this.params.totalNum = res.data.data.totalNum;
            this.params.totalPage = res.data.data.totalPage;
            console.log(this.list);
            // debugger
          }
        });
    },
    setOpenPicker() {
      // document.querySelector('.v-modal').style.position = 'absolute';
      this.$refs.picker.$el.style.position = "absolute";
      this.$refs.picker.open();
      let t = setInterval(() => {
        // console.log(this.$refs.picker.$el)
        if (
          this.$refs.picker.$el.parentNode.getElementsByClassName("v-modal")
            .length > 0
        ) {
          this.$refs.picker.$el.parentNode.getElementsByClassName(
            "v-modal"
          )[0].style.display = "none";
          window.clearInterval(t);
        }
      }, 30);
    },
    // 去到新页面
    goToNewPage(url){
      console.log(url);
      window.open(url,Math.random());
    },
  },
  computed: {
    ...mapState(["serverApi", "imgApi"]),
    swiper () {
      return this.$refs.mySwiperA.swiper
    },
  },
  components: {
    CardTitle,
    CardFooter,
    Star,
    swiper,
    swiperSlide,
    NoData
  },
};
</script>
<style scoped lang="scss">
@import "&/assets/css/index.scss";

.card-box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  /* card-content */
  .card-content {
    width: 100%;
    height: calc(100% - 150px);
    margin-top: 10px;
    background-color: #fff;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    .txt-wrapper {
      width: calc(100% - 32px);
      height: 100%;
      margin: 0 auto;
      overflow-x: hidden;
      // overflow-y: auto;
      box-sizing: border-box;
      padding: 0 pxToRem(20px) pxToRem(20px);
      h3 {
        width: 100%;
        height: pxToRem(36px);
        line-height: pxToRem(20px);
        font-size: pxToRem(18px);
        font-weight: 500;
        margin: 0;
        position: relative;
        .label-txt {
          font-size: pxToRem(10px);
          width: pxToRem(14px);
          height: pxToRem(14px);
          text-align: center;
          line-height: pxToRem(14px);
          color: #fff;
          font-style: normal;
          background-color: #56c980;
          border-radius: pxToRem(3px);
          position: absolute;
          right: pxToRem(-10px);
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .txt-subtxt {
        width: 100%;
        height: 40px;
        line-height: 40px;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        .star-date-box {
          width: 68%;
          display: flex;
          flex-wrap: nowrap;
          .datetime-txt {
            font-size: pxToRem(11px);
            color: #b8b8b8;
          }
          .star-box {
            position: relative;
            top: pxToRem(-3px);
            left: pxToRem(3px);
          }
        }
        .view-more-btn {
          font-size: pxToRem(11px);
          color: #f6821f;
          cursor: pointer;
        }
      }
      /* txt-content */
      .txt-content {
        border-bottom: 1px solid #efefef;
        padding-bottom: 20px;
        p {
          text-indent: 2em;
          line-height: pxToRem(20px);
          color: #777;
          font-size: pxToRem(14px);
        }
      }
      .img-cover {
        width: 100%;
        height: auto;
        img {
          width: 100%;
        }
      }
      /* txt-about-link */
      .txt-about-link {
        margin-top: 5px;
        h4 {
          height: pxToRem(40px);
          line-height: pxToRem(40px);
          font-size: pxToRem(13px);
          margin: 0;
        }
        .link-list {
          width: 100%;
          list-style: none;
          padding: 0;
          margin: 0;
          li {
            height: pxToRem(20px);
            line-height: pxToRem(20px);
            cursor: pointer;
            font-size: pxToRem(11px);
            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }
  }

  /* card-more */
  .card-footer {
    width: 100%;
    height: pxToRem(45px);
    position: fixed;
    left: 0;
    bottom: 0;
    // .view-more{padding:10px 30px;color:#fff;background-color:#268eff;}
  }

  /deep/.mint-datetime-action {
    color: #c9242b;
  }
}
</style>